<template>
  <div class="container">
    <div class="left">
      <span style="font-size:20px;font-weight:bold;">个人资料</span>
      <tiny-form
          style="margin-top:20px;"
          label-position="left"
          ref="createData"
          label-width="70px"
      >
        <tiny-form-item label="昵称">
          <tiny-input clearable v-model="userForm.nickname" placeholder="填写你的昵称"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="邮箱">
          <tiny-input clearable type="email" v-model="userForm.email" placeholder="填写你的邮箱"></tiny-input>
        </tiny-form-item>
        <tiny-form-item label="个人介绍">
          <tiny-input clearable type="textarea" v-model="userForm.description"
                      placeholder="填写职业技能、擅长的事情、喜欢的事情等"></tiny-input>
        </tiny-form-item>
        <tiny-form-item>
          <tiny-button type="primary" @click="saveUserInfo">保存修改</tiny-button>
        </tiny-form-item>
      </tiny-form>
    </div>
    <div class="right">
      <div class="image">
        <tiny-file-upload
            ref="pictureUpload"
            class="upload-demo picture-demo"
            list-type="picture-card"
            :limit="1"
            accept="image/*"
            action="http://localhost:5173/api/file/upload"
            @success="uploadSuccess"
        >
          <template #default>
            <tiny-icon-plus class="tiny-svg-size"/>
          </template>
          <template #file="{ file }">
            <div>
              <img class="tiny-upload-list__item-thumbnail" :src="file.url" alt=""/>
              <span class="tiny-upload-list__item-actions">
            <span class="tiny-upload-list__item-preview" @click="previewPicture(file)">
              <tiny-icon-view class="tiny-svg-size"/>
            </span>
            <span v-if="!disabled" class="tiny-upload-list__item-delete" @click="removePicture(file)">
              <tiny-icon-del class="tiny-svg-size"/>
            </span>
          </span>
            </div>
          </template>
        </tiny-file-upload>
        <tiny-dialog-box
            :visible="dialogVisible"
            width="60%"
            :modal="false"
            @close="closeImgPreviewPic"
        >
          <img style="width: 100%;height:100%;" :src="dialogImageUrl" alt="预览图片"/>
        </tiny-dialog-box>
      </div>
      <span style="color:#949494">上传头像</span>
    </div>
  </div>
</template>

<script setup>
import {
  Form as TinyForm,
  FormItem as TinyFormItem,
  Input as TinyInput,
  Button as TinyButton,
  FileUpload as TinyFileUpload,
  DialogBox as TinyDialogBox, Modal
} from '@opentiny/vue'
import {ref} from 'vue'
import {
  IconView,
  IconDel,
  IconPlus
} from '@opentiny/vue-icon'
import request from "../utils/request.js";


const {userId} = defineProps({userId:Number})
const TinyIconView = IconView()
const TinyIconDel = IconDel()
const TinyIconPlus = IconPlus()
const userForm = ref({
  nickname: '',
  email: '',
  description: '',
  avatar:''
})
const disabled = ref(false)
const dialogVisible = ref(false)
const dialogImageUrl = ref(userForm.value.avatar)
const pictureUpload = ref()
const coverImage = ref('')


// 保存修改
const saveUserInfo = () => {
  userForm.value.avatar = coverImage.value
  request.put('/api/users',userForm.value).then(res => {
    if (res.code === 1){
      Modal.message({message: res.data, status: 'success'})
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}

// 根据id查询用户信息
const queryUserById = () => {
  request.get(`/api/users/${userId}`).then(res => {
    if (res.code === 1){
      userForm.value = res.data
    }else {
      Modal.message({message: res.message, status: 'error'})
    }
  })
}
queryUserById()

// 文件上传成功
const uploadSuccess = (res) => {
  if (res.code === 200) {
    coverImage.value = res.data
  }
}

// 关闭预览图
const closeImgPreviewPic = () => {
  dialogVisible.value = false
}

// 预览图片
const previewPicture = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

// 移除图片
const removePicture = (file) => {
  pictureUpload.value.handleRemove(file)
}

</script>

<style lang="less" scoped>
.container {
  .right {
    margin-left: 120px;
  }

  .left {
    width: 40%;
  }

  width: 80%;
  height:300px;
  margin-left: 30px;
  display: flex;
  background-color: #f2f2f2;
  padding: 10px;
}
</style>
